<template>
  <div class="current-status">
    <el-row type="flex">
      <el-col :span="24">
        <el-card class="box-card">
          <div slot="header" class="head">
            <span>设备当前状态</span>
          </div>
          <el-col type="flex" :span="6">
            <el-row type="flex">
              <el-col type="flex" :span="12">
                <i class="iconfont iconzaixianmianliuliang" />
              </el-col>
              <el-col type="flex" :span="12">
                <div>设备在线状态</div>
                <!--  -->
              </el-col>
            </el-row>
            <el-row>
              <div class="tip">最近上线时间</div>
            </el-row>
          </el-col>
          <el-col type="flex" :span="6">
            <el-row type="flex">
              <el-col type="flex" :span="12">
                <i class="iconfont iconalarm-full" />
              </el-col>
              <el-col type="flex" :span="12">
                <div>设备报警状态</div>
                <!--  -->
              </el-col>
            </el-row>
            <el-row>
              <div class="tip">最近报警时间</div>
              <!--  -->
            </el-row>
          </el-col>

          <el-col type="flex" :span="6">
            <el-row type="flex">
              <el-col type="flex" :span="12">
                <i class="iconfont iconwendu" />
              </el-col>
              <el-col type="flex" :span="12">
                <div>设备实时温度</div>
                <!--  -->
              </el-col>
            </el-row>
            <el-row>
              <div class="tip">温度报警阈值</div>
              <!--  -->
            </el-row>
          </el-col>

          <el-col type="flex" :span="6">
            <el-row type="flex">
              <el-col type="flex" :span="12">
                <i class="iconfont iconshidu" />
              </el-col>
              <el-col :span="12">
                <div>设备实时湿度</div>
                <!--  -->
              </el-col>
            </el-row>
          </el-col>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "CurrentStatus",
  props: ["device"]
};
</script>

<style scoped>
.current-status {
  padding: 20px;
}
.head {
  display: flex;
  justify-content: space-between;
}
.iconfont {
  font-size: 80px;
}
.iconzaixianmianliuliang {
  color: orange;
}
.iconalarm-full {
  color: red;
}
.iconwendu {
  color: blue;
}
.iconshidu {
  color: greenyellow;
}
.status {
  font-size: 40px;
  font-weight: 800;
  margin-top: 10px;
}
.tip {
  margin-top: 10px;
}
.tip-date {
  margin-top: 5px;
  margin-bottom: 10px;
}
</style>